import React, { Component } from 'react'
import FormSchemaUtils from './InnerFormSchema'
import Logger from '../../utils/Logger'
import globalConfig from '../../config/'
import {Button,Row,Col,Icon} from 'antd'
import moment from 'moment'
Logger.getLogger('InnerForm')

class InnerForm extends Component {
  constructor(props) {
    super(props)
    this.state={}
    this.handleReset = this.handleReset.bind(this)
  }
  componentDidMount() {
    this.setState({
      type: this.props.type
    })
  }
  handleSubmit = (e) => {
    e.preventDefault();
    // 这种用法是非官方的, 直接从代码里扒出来的...
    // this.formComponent是通过wrappedComponentRef方式获取到的一个react组件
    const oldObj = this.formComponent.props.form.getFieldsValue()
    const newObj = this.filterQueryObj(oldObj);
    // 这个地方还要验证一些规则啊...用这种方法写好蛋疼...
    this.formComponent.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 还是要交给上层组件处理, 因为要触发table组件的状态变化...
        this.props.parentHandleSubmit(this.props.tableName,newObj);
      }
    });
  }

  handleSearch = (e) => {
    e.preventDefault();
    const oldObj = this.formComponent.props.form.getFieldsValue()
    const newObj = this.filterQueryObj(oldObj);
    this.formComponent.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        // 还是要交给上层组件处理, 因为要触发table组件的状态变化...
        this.props.parentHandleSearch(this.props.tableName,newObj,1);
      }
    });
  }


  filterQueryObj(oldObj) {
    // 将提交的值中undefined/null去掉
    const newObj = {};
    for (const key in oldObj) {
      if (oldObj[key] !== undefined && oldObj[key] !== null) {
        // 对于js的日期类型, 要转换成字符串再传给后端
        if (oldObj[key] instanceof Date) {
          newObj[key] = oldObj[key].format('yyyy-MM-dd HH:mm:ss');
        } else if (moment.isMoment(oldObj[key])) {  // 处理moment对象
          newObj[key] = oldObj[key].format('YYYY-MM-DD HH:mm:ss');
        } else if( oldObj[key].length === 2 && moment.isMoment(oldObj[key][0])) {
          const _res = []
          oldObj[key].forEach(v =>  _res.push(v.format('YYYY-MM-DD HH:mm:ss')))
          newObj[key] = _res;
        } else {
          newObj[key] = oldObj[key];
        }
      }
    }

    return newObj;
  }

  shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.type === this.state.type || nextProps.type === 'single') {
      return false
    }
    return true
  }

  handleReset(e) {
    e.preventDefault();
    this.formComponent.props.form.resetFields();
  }

  render() {
    const {tableName, schema,type} = this.props;
    const FormComponent = FormSchemaUtils.getForm(tableName, schema, type);
    // 根据当前的tableName, 获取对应的表单组件
    return (
      <div className="form-conainer-top ant-advanced-search-form">
        <FormComponent wrappedComponentRef={(input) => { this.formComponent = input; }}/>
        <Row gutter={8} type="flex" className="form-container-btn-group" justify="end">
          {
            type === 'single' ?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button type="primary"  onClick={this.handleSubmit}><Icon type="plus-circle" />新增</Button>
            </Col>
            :
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button type="primary" onClick={this.handleSearch}><Icon type="search" />检索</Button>
            </Col>
          }
          <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
            <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />清空</Button>
          </Col>
          {
            globalConfig.DBTable.default.showReload?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />重载</Button>
            </Col>
            :
            null
          }
          {
            globalConfig.DBTable.default.showExport?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />导入</Button>
            </Col>
            :
            null
          }
          {
            globalConfig.DBTable.default.showExport ?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />导出</Button>
            </Col>
            :
            null
          }
          {
            globalConfig.DBTable.default.showUpdate ?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />导入</Button>
            </Col>
            :
            null
          }
          {
            globalConfig.DBTable.default.showDelete ?
            <Col className="gutter-row" span={2} style={{ textAlign: 'right' }}>
              <Button onClick={this.handleReset}><Icon type="danger"/><Icon type="close" />删除</Button>
            </Col>
            :
            null
          }
        </Row>
      </div>
    )
  }
}
export default InnerForm
